<script lang="ts" setup>
import WxPage from '@/components/WxPage/index.vue'

import {ref} from 'vue'

const addressDataArr = [
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部江苏省南京市玄武区苏宁大道1号苏宁总部',
  },
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部',
  },
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部',
  },
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部',
  },
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部',
  },
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部',
  },
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部',
  },
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部',
  },
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部',
  },
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部',
  },
  {
    name:'张三',
    mobile:'152****5517',
    address:'江苏省南京市玄武区苏宁大道1号苏宁总部',
  }
]

const defaultAddress = ref(0)
const selectedDefaultAddress = (index)=>{
  if(defaultAddress.value != index){
    console.log('更改默认地址方法')
  }
}
const goToAccountSetting = ()=>{
  uni.navigateTo({
    url: '/pages/my/account-setting/index'
  })
}
const userInfoData = ref({})

</script>

<template>
  <WxPage fixedHeight="316rpx" :styles="'background-image: linear-gradient(180deg, #E0ECFF 0%, #F4F6FC 82%);'">
    <template v-slot:fixed>
      <view class="page-head">
        <view class="user-info-container">
          <view class="user-info-row">
            <view class="user-icon">
              <image class="user-icon-img" :src="userInfoData?.avatar||'https://oss.suning.com/srcfews/panasonic-mp/static/my/head-img.png'"></image>
            </view>
            <view class="user-info">
              <view class="user-info-name">
                {{userInfoData?.customerName||'金华市三丰家电有限公司'}}
              </view>
              <view class="user-info-rule">
                {{userInfoData?.postName || '商户管理员'}}
              </view>
            </view>
            <view class="setting-btn" @click="goToAccountSetting">
              <image class="setting-btn-img"
                     src="https://oss.suning.com/srcfews/panasonic-mp/static/my/btn-setting.png"></image>
            </view>
          </view>
        </view>
        <view class="user-info-address-head">
          <view class="address-btn">
            <image class="address-btn-img" src="https://oss.suning.com/srcfews/panasonic-mp/static/my/icon-address.png"></image>
          </view>
          <view class="address-label">
            我的收收货地址
          </view>
        </view>
      </view>
    </template>
    <view class="page-body">
      <view @click="selectedDefaultAddress(index)" :key="'address_item_' + index" class="body-item-address row-item" v-for="(item, index) in addressDataArr">
        <view class="addreess-item-detail">
          <view class="address-user">
            <view class="user-name">
              {{item.name}}
            </view>
            <view class="user-mobile">
              {{item.mobile}}
            </view>

            <view class="default-address-tag" v-if="defaultAddress == index">
              默认
            </view>
          </view>
          <view class="address-detail">
            {{item.address}}
          </view>
        </view>
      </view>
    </view>
  </WxPage>

</template>

<style lang="scss" scoped>
.page-body{
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding-top: 24rpx;
  .body-item-address{
    width: 686rpx;
    //height: 140rpx;
    margin-left: 32rpx;
    background: #FFFFFF;
    border-radius: 16px;

    .addreess-item-detail{
      margin: 24rpx;
      .address-user{
        display: flex;
        .user-name{
          font-size: 32rpx;
          color: #222222;
          letter-spacing: 0;
          line-height: 44rpx;
          font-weight: 600;
        }
        .user-mobile{
          margin-left: 16rpx;
          font-family: WeChat-Sans-Std-Bold;
          font-size: 28rpx;
          color: #323233;
          letter-spacing: 0;
          font-weight: 700;
          line-height: 44rpx;
          text-align: center;
        }
        .default-address-tag{
          margin-left: 24rpx;

          width: 56rpx;
          height: 32rpx;
          background: #1677FF;
          border-radius: 8rpx;

          font-size: 20rpx;
          line-height: 32rpx;
          color: #FFFFFF;
          letter-spacing: 0;
          text-align: center;
          font-weight: 500;
        }

      }
      .address-detail{
        margin-top: 8rpx;

        font-size: 28rpx;
        color: #646566;
        letter-spacing: 0;
        line-height: 40rpx;
        font-weight: 400;
      }
    }
  }
}
.page-head{
  width: 750rpx;
  padding-left: 32rpx;

  .user-info-container{
    height: 276rpx;
    width: 100%;
  }
  .user-info-row{
    position: absolute;
    top: 92rpx;

    height: 120rpx;
    width: 682rpx;
    display: flex;
    .user-icon{
      width: 120rpx;
      .user-icon-img{
        width: 120rpx;
        height: 120rpx;
      }
    }
    .user-info{
      width: 522rpx;
      padding-left: 24rpx;
      .user-info-name{
        font-size: 40rpx;
        line-height: 40rpx;
        color: #222222;
        font-weight: 500;
      }
      .user-info-rule{

        line-height: 40rpx;
        font-size: 28rpx;
        color: #969799;
        font-weight: 400;
      }
    }
    .setting-btn{
      width: 44rpx;
      display: flex;
      align-items: center;
      .setting-btn-img{
        width: 44rpx;
        height: 44rpx;
      }
    }
  }

  .user-info-address-head{
    height: 40rpx;
    width: 100%;
    display: flex;
    align-items: center;
    .address-btn{
      height: 40rpx;
      display: flex;
      .address-btn-img{
        width: 32rpx;
        height: 32rpx;
        margin: auto;
      }
    }
    .address-label{
      margin-left: 8rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      color: #111111;
      font-weight: 400;
    }
  }
}
</style>
